<template>

	<scroll-view @scrolltolower="scrolltolower" style="height: 80vh;" refresher-enabled='true'
		@refresherrefresh="scrollrefre" :refresher-triggered="triggered" scroll-y="true">


		<view class="waterfall-box h-flex-x h-flex-2">
			<view>
				<helang-waterfall v-for="(item, index) in leftList" :key="index" :params="item" tag="left"
					:index="index" @height="onHeight" @click="onClick"></helang-waterfall>
			</view>
			<view>
				<helang-waterfall v-for="(item, index) in rightList" :key="index" :params="item" @height="onHeight"
					@click="onClick" tag="right" :index="index"></helang-waterfall>
			</view>
		</view>
		<uni-load-more :status="status" :contentText="contentText" v-if="show"></uni-load-more>
		<u-empty v-else />
	</scroll-view>
</template>

<script>
import {
	interest, hallInfo, myCollect, lookHistory, myLike, myPost, addHistory
} from '../../api/hall.js'
import {
	announcement, getPastList
} from '../../api/love.js'
import helangWaterfall from "./helang-waterfall.vue"
export default {
	components: {
		"helang-waterfall": helangWaterfall
	},
	props: {
		list: {
			type: Array,
			default: () => []
		},
		type: {
			type: Number,
			default: 1
		},
		search: {
			type: String,
			default: ''
		},
		postType: {
			type: Number,
			default: 0
		},
		shipid: {
			type: Number,
			default: 0
		},
		userid: {
			type: Number,
			default: 0
		},
	},
	watch: {
		type(newType, oldType) {
			//清空数据
			this.list = [];
			this.rightList = [];
			this.leftList = [];
			this.status = 'more';
			this.currentPage = 1;
			this.getList(newType);
		},
		postType(newType, oldType) {
			//清空数据
			this.list = [];
			this.rightList = [];
			this.leftList = [];
			this.status = 'more';
			this.currentPage = 1;
			this.getList(newType);
		},
		shipid(newType, oldType) {
			//清空数据
			this.list = [];
			this.rightList = [];
			this.leftList = [];
			this.status = 'more';
			this.currentPage = 1;
			this.getList();
		},
		userid(newType, oldType) {
			//清空数据
			this.list = [];
			this.rightList = [];
			this.leftList = [];
			this.status = 'more';
			this.currentPage = 1;
			this.getList();
		},
	},

	data() {
		return {
			leftHeight: 0,
			rightHeight: 0,
			leftList: [],
			rightList: [],
			reload: false,
			status: 'more',
			contentText: {
				contentdown: '上拉加载更多~',
				contentrefresh: '加载中',
				contentnomore: '我是有底线的~'
			},
			// 当前页数
			currentPage: 1,
			// 每页数据数量
			pageSize: 10,
			show: true,
			triggered: true
		}
	},
	// onLoad() {
	// 	console.log(11111111111);
	// 	this.getList();
	// },
	mounted() {
		this.getList();

	},
	// onShow() {
	// 	this.getList();
	// },

	// 触底触发
	onReachBottom() {
		console.log("触底")
		if (this.status != 'noMore') {
			this.status = 'loading';
			this.getList()
		} else {
			console.log('123')
			this.status = "noMore"
		}
	},
	// 下拉刷新
	onPullDownRefresh() {
		console.log('下拉');
		// 正常情况下接口返回应该很会很快。故意延迟调用，让用户有在刷新的体验感
		setTimeout(() => {
			this.list = [];
			this.rightList = [];
			this.leftList = [];
			this.status = 'more';
			this.currentPage = 1;
			this.reload = true; // 可以添加一个reload标志位来决定是否需要在getList中做真正的数据刷新
			this.getList();
			this.triggered = false;
			uni.stopPullDownRefresh(); // 别忘了在数据请求完成后停止下拉刷新动画
			console.log('结束下拉');
		}, 800);

	},
	methods: {

		scrollrefre() {
			this.triggered = true
			console.log('下拉');
			setTimeout(() => {
				this.list = [];
				this.rightList = [];
				this.leftList = [];
				this.status = 'more';
				this.currentPage = 1;
				this.getList(this.type);
				this.triggered = false
				console.log('结束下拉');
			}, 800);

		},
		scrolltolower() {
			console.log("触底")
			if (this.status != 'noMore') {
				this.status = 'loading';
				this.getList()
			} else {
				this.status = "noMore"
			}
		},
		// 监听高度变化
		onHeight(height, tag) {
			if (tag == 'left') {
				this.leftHeight += height;
			} else {
				this.rightHeight += height;
			}
		},
		// 组件点击事件
		async onClick(index, tag) {
			console.log(index, tag);
			let content;
			// 对应的数据
			if (tag == 'left') {
				console.log(this.leftList[index]);
				content = this.leftList[index]
			} else {
				console.log(this.rightList[index]);
				content = this.rightList[index]
			}
			let direction = {
				"left": '左',
				"right": '右'
			}
			console.log(content, '66666666666666');
			// 添加历史记录
			const res = await addHistory({
				'article_id': content.id,
			})

			uni.navigateTo({
				url: '/pages/hall/hallDetails?id=' + content.id,
			});
		},
		// 获取数据
		async getList() {
			let search = this.$store.state.searchData;
			console.log(search, '加入搜索');
			console.log(this.type, 'ddddddddd');
			if (this.type == 1) {
				const res = await interest({
					'page': this.currentPage,
					'search': search
				}).then(res => {
					console.log(res, '获取我的关注内容');
					this.addList(res.data.data)
				});
			}
			if (this.type == 2) {
				const res = await hallInfo({
					'page': this.currentPage,
					'type': 0,
					'search': search,
					'show': 0,
				}).then(res => {
					console.log(res, '获取分享类内容');
					this.addList(res.data.data)
				});
			}
			if (this.type == 3) {
				const res = await hallInfo({
					'page': this.currentPage,
					'type': 1,
					'search': search,
					'show': 0,
				}).then(res => {
					console.log(res, '获取永久类内容');
					this.addList(res.data.data)
				});
			}
			//获取情侣宣文
			if (this.type == 4) {
				this.announcementList(this.type)
				console.log('获取情侣宣文');
			}
			//获取闺蜜宣文
			if (this.type == 5) {
				this.announcementList(this.type)
				console.log('获取闺蜜宣文');
			}
			//获取我发布的帖子
			if (this.type == 6) {
				const res = await myPost({
					'page': this.currentPage,
					'type': this.postType
				}).then(res => {
					console.log(res, '我发布的帖子');
					this.addList(res.data.data)
				});
			}
			if (this.type == 7) {
				const res = await myCollect({
					'page': this.currentPage,
				}).then(res => {
					console.log(res, '我的收藏');
					const articleDataArray = res.data.data.map(item => item.article);
					this.addList(articleDataArray)
				});
			} if (this.type == 8) {
				const res = await lookHistory({
					'page': this.currentPage,
				}).then(res => {
					console.log(res, '我的观看历史');
					const articleDataArray = res.data.data.map(item => item.article);
					this.addList(articleDataArray)
				});
			}
			if (this.type == 9) {
				const res = await myLike({
					'page': this.currentPage,
				}).then(res => {
					console.log(res, '我的喜欢');
					const articleDataArray = res.data.data.map(item => item.article);
					this.addList(articleDataArray)
				});
			}
			//过往
			if (this.type == 10) {
				console.log('情侣过往----------');
				const res = await getPastList({
					'page': this.currentPage,
					'ship_id': this.shipid,
					'user_id': this.userid
				}).then(res => {
					console.log(res, '情侣过往');
					this.addList(res.data.data)
				});
			}
			this.$store.commit('clearSearchData');//清空
		},
		async announcementList(type) {
			const res = await announcement({
				'type': type,
				'page': this.currentPage,
				'user_id': this.userid
			}).then(res => {
				console.log(res, '获取宣文');
				this.addList(res.data.data)
			});
		},
		addList(res) {

			// 获取到的数据，请注意数据结构
			console.log('res', res);
			// 左右列表高度的差
			let differ = this.leftHeight - this.rightHeight;
			// 计算差值，用于确定优先插入那一边
			let differVal = 0;
			// 初始化左右列表的数据
			let i = differ > 0 ? 1 : 0;
			let [left, right] = [
				[],
				[]
			];
			// 获取插入的方向
			let getDirection = (index) => {
				/* 左侧高度大于右侧超过 600px 时，则前3条数据都插入到右边 */
				if (differ >= 600 && index < 3) {
					differVal = 1;
					return 'right';
				}

				/* 右侧高度大于左侧超过 600px 时，则前3条数据都插入到左边 */
				if (differ <= -600 && index < 3) {
					differVal = -1;
					return 'left';
				}

				/* 左侧高度大于右侧超过 350px 时，则前2条数据都插入到右边 */
				if (differ >= 350 && index < 2) {
					return 'right';
				}
				/* 右侧高度大于左侧超过 350px 时，则前2条数据都插入到左边 */
				if (differ <= -350 && index < 2) {
					differVal = -1;
					return 'left';
				}

				/* 当前数据序号为偶数时，则插入到左边 */
				if ((i + differVal) % 2 == 0) {
					return 'left';
				} else {
					/* 当前数据序号为奇数时，则插入到右边 */
					return 'right';
				}
			}
			// 将数据源分为左右两个列表，容错差值请自行根据项目中的数据情况调节
			res.forEach((item, index) => {
				if (getDirection(index) == 'left') {
					//console.log(`差值：${differ},方向：left，序号${index}`)
					left.push(item);
				} else {
					//console.log(`差值：${differ},方向：right，序号${index}`)
					right.push(item);
				}
				i++;
			});
			// 将左右列表的数据插入，第一页时则覆盖
			if (this.currentPage == 1) {
				this.leftList = left;
				this.rightList = right;
				uni.stopPullDownRefresh();
			} else {
				this.leftList = [...this.leftList, ...left];
				this.rightList = [...this.rightList, ...right];
			}
			this.status = res.length === this.pageSize ? 'loading' : 'nomore';  //是否还有下一页
			this.currentPage++;
		},


	}
}
</script>

<style lang="scss">
page {
	background-color: #f6f6f6;
}
</style>

<style lang="scss" scoped>
.waterfall-box {
	padding: 20rpx 0rpx;
	box-sizing: border-box;

	>view {
		padding: 0 10rpx;
	}
}

.h-flex-x {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: flex-start;
	align-content: flex-start;

	&.h-flex-2 {
		>view {
			width: 50%;
		}
	}
}

.load-txt {
	padding: 0 0 20rpx 0;
	text-align: center;
	color: #999;
	font-size: 24rpx;
}
</style>